<template>
	<view class="professBox">
		<view class="list">
			<view class="tips">请上传身份证正面</view>
			<view class="imglist">
				<view class="imgbox" v-if='imgUrlsfz.length>0'>
					<image  :src="imgUrlsfz[0]"  mode=""></image>
				</view>
				<view class="upload flex-col" @tap="ChooseImage(1)">
					<image src="../../static/icon/upload.png"></image>
					<text>上传</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="tips">请上传身份证反面</view>
			<view class="imglist">
				<view class="imgbox" v-if='imgUrlsfz[1]'>
					<image :src="imgUrlsfz[1]" @click="ViewImage" mode=""></image>
				</view>
				<view class="upload flex-col" @tap="ChooseImage(2)">
					<image src="../../static/icon/upload.png"></image>
					<text>上传</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="tips">请上传个人资质图片，工作人员会尽快审核</view>
			<view class="imglist">
				<view class="imgbox" v-if='imgleng>0 '>
					<image v-for="(item,index) in imgUrlarr" :key='index' :src="item" @click="ViewImage" mode=""></image>
				</view>
				<view class="upload flex-col" @tap="ChooseImage(0)">
					<image src="../../static/icon/upload.png"></image>
					<text>上传</text>
				</view>
			</view>
		</view>
		
		
		
		<button type="primary" class="mgTop40" @click="cancel">确认上传</button>
		
		
	</view>
</template>

<script>
	import OSSUtil from '../../libs/ossUtil.js'
	export default {
	    name: 'byImgUpload',
	    props: {
	        authId: String,
	        imgUrl: String,
	        deleteFlag: Boolean,
	        startShowAction: Function,
	        startDelete: Function,
	        imgActions: Array,
	    },
	    data() {
	        return {
	            progress: 0,
				imgUrlarr:[],
				imgUrlsfz:[],
				imgleng:0,
	            imgData: {
	                visible: false,
	                actions: this.imgActions
	            }
	        }
	    },
	    methods: {
	        async ChooseImage(type) {
				console.log(type)
	            let files = await OSSUtil.getImage(); // 选择图片
	            let sign = await OSSUtil.get_STS() // 获取签名等信息
	 
	            let imageSrc = files.tempFilePaths[0];
	            let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称
	            
	            let uploadTask = uni.uploadFile({
	                url: sign.host,
	                filePath: imageSrc,
	                fileType: 'image',
	                name: 'file',
	                formData: {
	                    name: imageSrc,
	                    'key': fileName,
	                    'policy': sign.policy,
	                    'OSSAccessKeyId': sign.accessId,
	                    'success_action_status': '200',
	                    //让服务端返回200,不然，默认会返回204
	                    'signature': sign.signature,
	                },
	                success: (res) => {
						let that = this
						console.log(sign.host+'/'+fileName)
						let img = sign.host+'/'+fileName
						if(type!==0){
							this.imgUrlsfz = this.imgUrlsfz .concat(img)
						}else{
							this.imgUrlarr=this.imgUrlarr.concat(img)
						}
						
						console.log(this.imgUrlsfz)
						console.log(this.imgUrlarr)
						this.imgleng = this.imgUrlarr.length
	                 
	                    uni.showToast({
	                        title: '上传成功',
	                        icon: 'success',
	                        duration: 1000
	                    });
	                    that.$emit('imgUploaded', {data: sign.host + fileName, authId: this.authId});
	                },
	                fail: (err) => {
	                    console.log('uploadImage fail', err);
	                    uni.showModal({
	                        content: err.errMsg,
	                        showCancel: false
	                    });
	                }
	            });
	            uploadTask.onProgressUpdate((res) => {
	                console.log("上传进度" + res.progress);
	                this.progress = res.progress;
	            });
	 
	            // this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
	        },
	        ViewImage(e) {
	            uni.previewImage({
	                urls: this.imgUrlarr,
	                current: e.currentTarget.dataset.url
	            });
	        },
	        DelImg() {
	            this.$emit('imgDel', {
	                authId: this.authId
	            });
	        },
			cancel(){
				let that = this
				console.log(that.imgUrlarr)
				let imgarr=[]
				that.imgUrlarr.forEach(item=>{
					imgarr = imgarr.concat(item)
				})
				that.imgUrlsfz.forEach(item=>{
					imgarr = imgarr.concat(item)
				})
				console.log(imgarr)
				
				let expertsImg = imgarr.join(',')
				console.log(expertsImg)
				
				this.$http.get('/userCenter/expertsApply', { expertsImg: expertsImg }).then(res => {
					console.log(res.data);
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						});
						uni.switchTab({
							url:'../tab/person'
						})
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			
			}
	    }
	}
</script>

<style scoped lang="scss">
.professBox {
	padding: 30upx;
	.list{
		margin-bottom: 30rpx;
	}
	.tips {
		color: #22222a;
		font-size: 30upx;
		padding-bottom: 30upx ;
	}
	.imglist{
		display: flex;
		 flex-wrap: wrap;
	}
	.imgbox{
		justify-content: space-between;
	}
	.imgbox image{
		display: inline-block;
		width: 220upx;
		height: 146upx;
		margin-right: 10upx;
	}
	
	
	.upload {
		width: 220upx;
		height: 146upx;
		background: rgba(235, 235, 240, 1);
		border-radius: 8upx;
		align-items: center;
		justify-content: center;
		color: #9a9a9a;
		font-size: 24upx;
		image {
			width: 34upx;
			height: 34upx;
			margin-bottom: 14upx;
		}
	}
	button{
		background: #FD580A
	}
}

</style>

 
 

 
 